// 1. 创建 store 对象，并将初始值存储在 store 中
// 2. 将 store 存储在全局组件都能获取到的位置
// 3. 让组件获取 store 中的状态，并让初始值显示在组件中

import axios from 'axios'

// 通过装饰器将数据变成可观测数据
import { observable, configure, action, runInAction, flow, computed, autorun } from 'mobx'

// 通过配置强制程序使用 action 函数更改应用程序中的状态，只有 action 函数才能修改 state 状态
configure({enforceActions: 'observed'})

class CounterStore {
  constructor () {
    autorun(() => {
      try {
        uniqueUsername(this.username)
        console.log('用户名可用')
      } catch (error) {
        console.log(error.message)
      }
    }, {
      // 延迟执行函数
      delay: 1000
    })
  }
  @observable count = 0
  // 用户列表数据
  @observable users = []
  // 用户名
  @observable username = ''

  // 用 action 装饰器将函数装饰成一个 action 函数
  @action.bound increment () {
    this.count = this.count + 1
  }

  @action.bound decrement () {
    this.count = this.count - 1
  }

  // @action.bound async getData () {
  //   const { data } = await axios.get('https://api.github.com/users')
  //   // this.users = data 有异步操作后不能直接修改数据
  //   // 将修改数据的操作都放置在 mobx 提供的 runInAction 方法的参数里
  //   runInAction(() => this.users = data)
  // }

  // 使用 flow 传入 generator 函数 
  getData = flow(function * () {
    const { data } = yield axios.get('https://api.github.com/users')
    this.users = data
  }).bind(this)

  @computed get getResult () {
    return this.count * 10
  }

  @action.bound changeUsername (username) {
    this.username = username
  }
}

const counter = new CounterStore()

function uniqueUsername(username) {
  return new Promise((resolve, reject) => {
    if (username === 'admin') {
      reject('用户名已存在')
    } else {
      resolve()
    }
  })
}

export default counter